<template>
	<view class="content">
		<default-bar bgColor="bg-white"></default-bar>
		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabBars" :key="item.id" class="nav-item" :class="{current: index === tabCurrentIndex}"
			 :id="'tab'+index" @click="changeTab(index)">{{item.name}}</view>
		</scroll-view>
		<!-- 下拉刷新组件 -->
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh"
		 @setEnableScroll="setEnableScroll">
			<!-- 内容部分 -->
			<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
				<swiper-item v-for="tabItem in tabBars" :key="tabItem.id">
					<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" @scrolltolower="loadMore">
						<view class="order-list">
							<view class="order-item" v-for="(item, index) in tabItem.newsList" :key="index" :data-id="tabItem.id=='1'?item.id:item.order_id"
							 :data-is="tabItem.id" @tap="goDetail">
								<view class="o_top" :class="(tabCurrentIndex==1 && item.is_cash==1)?'y_j':''">
									<view :style="(tabCurrentIndex==1 && item.is_cash==1)?'display: inline':''">
										<text>{{item.b_name}}</text>
										<image v-if="tabCurrentIndex==1 && item.is_cash==1" class="y_j_i" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/deposit-card.png?x-oss-process=image/resize,m_fill,h_30,w_72"
										 mode=""></image>
									</view>
									<view class="">
										{{item.status==2?'待取货':(item.status==3?'已完成':'')}}
									</view>
									<text v-if="tabCurrentIndex==1 && item.is_cash==1" class="y_j_t"></text>
								</view>
								<view class="o_bottom">
									<image :src="item.shop_image+'?x-oss-process=image/resize,m_fill,h_88,w_88'" mode=""></image>
									<view class="info">
										<view class="">
											{{item.pay_time}}
										</view>
										<view class="">
											<text v-if="item.total_price==0">积分换购</text>
											<text v-if="item.total_price>0" class="text-price">{{item.total_price}}</text>
										</view>
									</view>
									<view class="o_btn bg-colorP" v-if="(item.total_price>15 && tabCurrentIndex==0 && item.b_mode == 1) || (item.b_mode == 2)"
									 style="background-color:#F34930;color:#ffffff;margin-right: 10rpx;" :data-orderId="item.order_id" :data-mode="item.b_mode"
									 @tap.stop="goCheating">
										{{item.b_mode==2?'赢免单':'好友助力'}}
									</view>
									<view class="o_btn bg-colorP" style="background-color:#F34930;color:#ffffff;margin-right: 10rpx;" v-if="tabCurrentIndex==1 && !item.is_command"
									 @tap.stop="nav" :data-url="'/pages/cloudMall/addEvaluate?orderId='+item.id+'&shopId='+item.business_id+'&from=shops'">
										评价订单
									</view>
									<view class="o_btn bg-colorP" style="background-color:#F34930;color:#ffffff;" :data-businessId="item.business_id"
									 :data-industryId="item.industry_id" @tap.stop="goShops">
										再来一单
									</view>
								</view>
							</view>
						</view>
						<!-- 上滑加载更多组件 -->
						<mix-load-more :status="tabItem.loadMoreStatus" :noContentShow="noContentShow"></mix-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</mix-pulldown-refresh>

		<view class="no-auth" :style="[{height:winHeight+'px'},{top:StatusBar+'px'}]" v-if="!checkUserStatus">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/no-auth.png" mode=""></image>
			<view class="tips">
				登录后可查看订单
			</view>
			<view class="" @click="goLoginNew">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import json from '@/static/json/json.js'
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			mixPulldownRefresh,
			mixLoadMore,
		},
		data() {
			return {
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				noContentShow: false,
				StatusBar: this.StatusBar,
				checkUserStatus: false,
				winHeight: 0,
				curUrl: ''
			}
		},
		computed: {},
		onShow() {
			this.checkUserStatus = this.checkUserNew()
			// 是否显示订单
			if (this.checkUserStatus) {
				this.loadTabbarsNew();
			}
		},
		onLoad() {
			var that = this
			// 获取屏幕宽度
			uni.getSystemInfo({
				success: function(res) {
					windowWidth = res.windowWidth;
					let winHeight = res.windowHeight - that.StatusBar;
					that.winHeight = winHeight;
				}
			})
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
			let curUrl = `/${this.curUrlWithArgs()}`
			this.curUrl = encodeURIComponent(curUrl)
		},
		methods: {
			// 跳转函数
			nav(e) {
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url
					});
				}
			},
			// 登录登录
			goLoginNew() {
				uni.navigateTo({
					url: `/pages/login?next=${this.curUrl}`,
				})
			},
			// 获取页面栈的路径
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			// 检测是否登陆
			checkUserNew() {
				if (uni.getStorageSync('auth_token')) {
					if (uni.getStorageSync('needOnload')) {
						uni.removeStorageSync('needOnload')
						this.loadTabbarsNew();
					}
					return true
				} else {
					return false
				}
			},
			/**
			 * 数据处理方法在vue和nvue中通用，可以直接用mixin混合
			 * 这里直接写的
			 * mixin使用方法看index.nuve
			 */
			//获取分类
			loadTabbarsNew() {
				let tabList = json.tabList;
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.page = 1
					item.lastPage = 1
				})
				this.tabBars = tabList;
				this.loadNewsListNew('add');
			},
			// 订单列表
			loadNewsListNew(type) {
				var that = this
				let tabItem = this.tabBars[this.tabCurrentIndex];
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					tabItem.page = 1;
				}

				//setTimeout模拟异步请求数据
				setTimeout(() => {
					if (type === 'refresh') {
						tabItem.newsList = []; //刷新前清空数组
					}
					if (tabItem.id === '1') {
						that.$request({
							url: '/OnlineOrder/getOrderByUid',
							methods: "GET",
							data: {
								page: tabItem.page
							},
							success: res => {
								if (res.data.status == 1) {
									var listData = res.data.data
									if (listData.totalNum == 0 && listData.data.length == 0) {
										tabItem.newsList = []
										that.noContentShow = true
										return
									}
									tabItem.lastPage = listData.pageCount
									tabItem.page++;
									listData.data.forEach(item => {
										item.total_price = Number(item.total_price)
										tabItem.newsList.push(item)
									})
									tabItem.loadMoreStatus = (tabItem.page > tabItem.lastPage) ? 2 : 0;
									//上滑加载 处理状态
									uni.hideLoading()
								}
							},
							fail: () => {},
							complete: () => {}
						});
					} else if (tabItem.id === '2') {
						that.$request({
							url: '/Order/getOrderByUid',
							methods: "GET",
							data: {
								page: tabItem.page
							},
							success: res => {
								if (res.data.status == 1) {
									tabItem.lastPage = res.data.data.pageCount
									if (res.data.data.totalNum == 0 && res.data.data.data.length == 0) {
										tabItem.newsList = []
										that.noContentShow = true
										return
									}
									tabItem.page++;
									res.data.data.data.forEach(item => {
										item.total_price = Number(item.order_amount)
										tabItem.newsList.push(item)
									})
									tabItem.loadMoreStatus = tabItem.page > tabItem.lastPage ? 2 : 0;
									//上滑加载 处理状态
									uni.hideLoading()
								}
							},
							fail: () => {},
							complete: () => {}
						});
					}
					//下拉刷新 关闭刷新动画
					if (type === 'refresh') {
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						tabItem.refreshing = false;
						// #endif
						tabItem.loadMoreStatus = 0;
					}
				}, 600)
			},
			goShops(e) {
				var busId = e.currentTarget.dataset.businessid
				var industryId = e.currentTarget.dataset.industryid
				if (!industryId) return
				if (industryId == '6') {
					uni.navigateTo({
						url: '/pages/scenicDetail?busId=' + busId
					})
				} else {
					uni.navigateTo({
						url: '/pages/generalDetail?busId=' + busId
					})
				}
			},
			goCheating(e) {
				var orderId = e.currentTarget.dataset.orderid
				var mode = e.currentTarget.dataset.mode
				if (mode == 1) {
					var payType = this.tabBars[this.tabCurrentIndex].id == '1' ? 'online' : 'offline'
					// offline 线下  online 线上
					uni.navigateTo({
						url: '/pages/cheatingDetail?orderId=' + orderId + '&payType=' + payType
					});
				} else {
					uni.navigateTo({
						url: '/pages/newCheating?orderId=' + orderId
					});
				}
			},
			//订单详情
			goDetail(e) {
				var is = e.currentTarget.dataset.is
				var id = e.currentTarget.dataset.id
				if (is == 1) {
					uni.navigateTo({
						url: `/pages/orderDetail?id=${id}`
					})
				}
			},
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsListNew('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsListNew('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},

			//tab切换
			async changeTab(e) {
				this.noContentShow = false
				this.page = 1
				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}

				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;


					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
						this.loadNewsListNew('add');
						tabItem.loaded = true;
					} else {
						if (tabItem.newsList.length == 0) {
							this.noContentShow = true
						}
					}
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		background-color: #f5f5f5;
		height: 100%;
		overflow: hidden;
	}

	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;
		padding-left: 30upx;

		.nav-item {
			display: inline-block;
			width: 160upx;
			height: 88upx;
			/* text-align: center; */
			line-height: 88upx;
			font-size: 30upx;
			color: #666666;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 8upx solid #f34930;
				position: absolute;
				left: 0;
				bottom: 0;
				border-radius: 4upx;
				/* transform: translateX(-50%); */
				transition: .3s;
				letter-spacing: 1.4upx;
			}
		}

		.nav-item:nth-child(1) {
			margin-right: 75upx;
		}

		.current {
			color: #333333;
			letter-spacing: 1.9upx;
			font-weight: bold;
			font-size: 36upx;

			&:after {
				width: 100%;
			}
		}
	}

	.swiper-box {
		height: 100%;
	}

	.panel-scroll-box {
		height: 100%;
		box-sizing: border-box;

		.order-list {
			overflow: hidden;
			width: 100%;
			box-sizing: border-box;
			padding: 0 24upx;

			.order-item {
				width: 100%;
				background-color: #ffffff;
				border-radius: 10upx;
				padding: 0 0 30upx;
				box-sizing: border-box;
				margin-bottom: 25upx;
				display: flex;
				flex-direction: column;

				.o_top {
					width: 100%;
					height: 90upx;
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					align-items: center;
					/* padding-bottom: 30upx; */
					border-bottom: solid 1upx #f2f2f2;
					box-sizing: border-box;
					margin-bottom: 24upx;
					padding: 0 20upx;
					view:nth-child(1) {
						color: #333333;
						font-size: 30upx;
						letter-spacing: 1.2upx;
						font-weight: bold;
						line-height: 30upx;
					}

					view:nth-child(2) {
						color: #f34930;
						font-size: 24upx;
						line-height: 24upx;
						letter-spacing: 0.9upx;
					}
				}

				.o_bottom {
					width: 100%;
					/* height: 110upx; */
					display: flex;
					flex-direction: row;
					box-sizing: border-box;
					/* align-items: flex-end; */
					padding: 0 20upx;
					image {
						width: 88upx;
						height: 88upx;
						background-color: #000000;
						border-radius: 10upx;
						margin-right: 24upx;
					}

					.info {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 88upx;

						view:nth-child(1) {
							color: #999999;
							font-size: 20upx;
						}

						view:nth-child(2) {
							display: flex;
							flex-direction: row;

							text {
								color: #f23e14;
								font-size: 30upx;
								font-weight: bold;
								line-height: 30upx;
							}

							text:nth-child(1) {
								font-size: 24upx;
								margin-right: 10upx;
							}
						}
					}

					.o_btn {
						width: 150upx;
						height: 48upx;
						background-color: #0c99f7;
						border-radius: 4upx;
						color: #fff;
						text-align: center;
						line-height: 48upx;
						font-size: 24upx;
						align-self: flex-end
					}
				}
			}

			.order-item:nth-child(1) {
				margin-top: 20upx;
			}

			.order-item:last-child {
				margin-bottom: 0 !important;
			}
		}
	}

	/**
	 * 新闻列表 直接拿的nvue样式修改，,
	 * 一共需要修改不到10行代码, 另外px需要直接修改为upx，只有单位不一样，计算都是一样的
	 * 吐槽：难道不能在编译的时候把nuve中的upx转为px? 这样就不用修改单位了
	 */
	.video-wrapper {
		width: 100%;
		height: 440upx;

		.video {
			width: 100%;
		}
	}

	view {
		display: flex;
		flex-direction: column;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.news-item {
		position: relative;
	}

	/* 修改结束 */

	.no-auth {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
		position: absolute;
		top: 0;
		left: 0;

	}

	.no-auth image {
		width: 600rpx;
		margin-bottom: 10rpx;
		margin-top: 150rpx;
	}

	.no-auth view:nth-child(2) {
		color: #333;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.no-auth view:nth-child(3) {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		color: #fff;
		background: linear-gradient(left, #fe7b68, #f34930);
		line-height: 88rpx;
		height: 88rpx;
		width: 240rpx;
		border-radius: 8rpx
	}

	.y_j {
		background-color: rgba(243, 73, 48, .1) !important;
		position: relative;
	}

	.y_j .y_j_t {
		width: 6rpx;
		height: 88rpx;
		background-color: #f34930;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		position: absolute;
		left: 0;
		top: 0
	}

	.y_j .y_j_i {
		display: inline-block;
		width: 72rpx;
		height: 30rpx;
	}
</style>
